define([
    "ngController"
],function (appAngular) {

    // 底部按钮先关-可拖动模块-3、模型结构
    appAngular.directive("bimApiModelStructure", function () {
        return {
            restrict: "EA",
            replace: true,
            template: `<div class="draggable model-structure" 
                            style="display: {{(btnsSelect.name=='structure'&&btnsSelect.check == true)?'block':'none'}}">
						<div class="model-drag-head">
							<div class="dropdown">
								<button class="dropbtn" title="{{modelStructure.titleMsg.title}}">
									<span class="dropbtn-text">{{modelStructure.titleMsg.title}}</span>
								</button>
								<div class="dropdown-content">
									<a ng-repeat="item in modelStructure.titleMsg.listMsg" 
									    ng-click="modelStructureDropdownSelect(item)">{{item}}</a>
								</div>
							</div>
							<img class="model-drag-head-img-close" 
							ng-src="{{baseUrl + imgDragClose}}" ng-click="modelDragTitleClose()" />
						</div>
						<div class="model-drag-content">
							<div class="model-structure-structure" ng-if="modelStructure.titleMsg.title=='模型结构'">
								<details open="open" ng-repeat="item in modelStructure.structure">
									<summary style="color: #0696FA;">
									    <!--<label class="color-label">
									        <input type="checkbox" name="structure"><span></span>
									    </label>-->
									    <span>{{item.name}}</span>
									</summary>
									<details ng-repeat="itemList in item.data">
										<summary>
                                            <!--<label class="color-label">
                                                <input type="checkbox" name="structure"><span></span>
                                            </label>-->
                                            <span>{{itemList.name}}</span>
                                        </summary>
										<p ng-repeat="data in itemList.data">
											<label class="color-label">
                                                <input type="checkbox" name="structure">
                                                <span>{{data.title}}</span>
											</label>
										</p>
									</details>
								</details>
							</div>
							<div class="model-structure-sign" ng-if="modelStructure.titleMsg.title=='标注'">
								<div class="structure-sign-content">
									<div class="sign-header">
										<div class="eyes-img">
											<img ng-src="{{modelStructure.sign.eyesOpen?baseUrl + imgEyesOpen:baseUrl + imgEyesClose}}"
											    ng-click="modelStructureSigneyesOpen()">
										</div>
										<span>全部</span>
										<div class="color-content">
											<span ng-repeat="color in modelStructure.sign.color" 
												style="border-color: {{color}}; background-color: {{color}};" 
												class="color-level" 
												ng-class="modelStructure.sign.colorIndex!==color?modelStructure.sign.colorClass:null " 
												ng-click="modelChooseColorIndex(modelStructure.sign, color)">
											</span>
										</div>
										<img ng-src="{{modelStructure.sign.orderUp?baseUrl + imgOrderUp:baseUrl + imgOrderDown}}" 
											ng-click="modelStructureSignOrderUp(modelStructure.sign)">
									</div>
									<div class="sign-show">
										<div class="sign-every" ng-repeat="sign in modelStructure.sign.data">
											<div class="sign-every-show" ng-if="!sign.edit">
												<table>
													<tr>
														<td rowspan="3" colspan="3">
															<img class="sign-img-small" ng-src="{{sign.eyesOpen?baseUrl + imgEyesOpen:
															baseUrl + imgEyesClose}}">
														</td>
														<th>{{sign.name}}</th>
														<td><img ng-src="{{baseUrl + imgEditOn}}" class="edit-sign" 
														    ng-click="modelStructureEdit(sign)">
														</td>
													</tr>
													<tr>
														<td><span style="background-color: {{sign.colorIndex}}"></span></td>
														<td>{{sign.time}}</td>
													</tr>
													<tr>
														<td colspan="2">{{sign.moreMsg}}</td>
													</tr>
												</table>
											</div>
											<div class="sign-every-edit" ng-if="sign.edit">
												<div class="sign-edit-header">
													<input type="text" placeholder="输入标题" ng-model="sign.name">
													<div class="color-level-check">
														<div ng-repeat="bgColor in modelStructure.sign.color" 
															class="color-every {{sign.colorIndex==bgColor?'color-every-active':null}}" 
															ng-click="modelChooseColorIndex(sign, bgColor)">
															<span style="background-color: {{bgColor}}"></span>
														</div>
													</div>
												</div>
												<textarea placeholder="输入备注信息" rows="4" maxlength="50" ng-model="sign.moreMsg" ng-click="GetFocus($event)"></textarea>
												<div class="function-btn">
													<button ng-click="modelStructureEdit(sign)">删除本条</button>
													<button ng-click="modelStructureEdit(sign)">完成</button>
													<button ng-click="modelStructureEdit(sign)">取消</button>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="model-structure-eyesmark" ng-if="modelStructure.titleMsg.title=='视角书签'">
								<div class="structure-eyesmark-content">
									<div class="eyesmark-header">
										<span>全部</span>
										<div class="color-content">
											<span ng-repeat="color in modelStructure.eyesmark.color" 
												style="border-color: {{color}}; background-color: {{color}};" 
												class="color-level" 
												ng-class="modelStructure.eyesmark.colorIndex!==color?modelStructure.eyesmark.colorClass:null " 
												ng-click="modelChooseColorIndex(modelStructure.eyesmark, color)">
											</span>
										</div>
										<img ng-src="{{modelStructure.eyesmark.orderUp?baseUrl + imgOrderUp:baseUrl + imgOrderDown}}" 
											ng-click="modelStructureSignOrderUp(modelStructure.eyesmark)">
									</div>
									<div class="eyesmark-show">
										<div class="eyesmark-every" ng-repeat="eyesmark in modelStructure.eyesmark.data">
											<div class="eyesmark-every-show" ng-if="!eyesmark.edit">
												<table>
													<tr>
														<td rowspan="2"><img ng-src="{{baseUrl+eyesmark.img}}" class="eyesmark-img-small"></td>
														<th>{{eyesmark.name}}</th>
														<td><img ng-src="{{baseUrl + imgEditOn}}" class="edit-eyesmark" 
														    ng-click="modelStructureEdit(eyesmark)">
														</td>
													</tr>
													<tr>
														<td><span style="background-color: {{eyesmark.colorIndex}}"></span></td>
														<td>{{eyesmark.time}}</td>
													</tr>
													<tr>
														<td colspan="3">{{eyesmark.moreMsg}}</td>
													</tr>
												</table>
											</div>
											<div class="eyesmark-every-edit" ng-if="eyesmark.edit">
												<div class="eyesmark-edit-header">
													<img ng-src="{{baseUrl+eyesmark.img}}">
													<input type="text" placeholder="输入标题" ng-model="eyesmark.name">
													<div class="color-level-check">
														<div ng-repeat="bgColor in modelStructure.eyesmark.color"
															class="color-every" 
															ng-class="eyesmark.colorIndex==bgColor?'color-every-active':null" 
															ng-click="modelChooseColorIndex(eyesmark, bgColor)">
															<span style="background-color: {{bgColor}}"></span>
														</div>
													</div>
												</div>
												<textarea placeholder="输入备注信息" rows="4" maxlength="50" ng-model="eyesmark.moreMsg"></textarea>
												<div class="function-btn">
													<button ng-click="modelStructureEdit(eyesmark)">删除本条</button>
													<button ng-click="modelStructureEdit(eyesmark)">完成</button>
													<button ng-click="modelStructureEdit(eyesmark)">取消</button>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<!--<div class="model-drag-foot">
							<div class="foot-search-content">
								<label>
									<img src="{{baseUrl + imgSearch}}" />
									<input type="text" placeholder="搜索内容" />
								</label>
								<button>搜索</button>
							</div>
						</div>-->
					</div>`,
            link: function ($scope, $elem, attrs) {
                // 可拖动模块-3、模型结构
                $scope.modelStructure = {
                    titleMsg: {
                        title: "模型结构",
                        listMsg: ["模型结构", "标注", "视角书签"]
                    },
                    structure: [
                        {
                            name: "零件一",
                            level: "1",
                            data: [
                                {
                                    name: "基本属性",
                                    level: "2",
                                    data: [{
                                        img: $scope.imgIconModel,
                                        title: "模型-属性-内容"
                                    }]
                                },
                                {
                                    name: "尺寸标注",
                                    level: "2",
                                    data: [{
                                        img: $scope.imgIconModel,
                                        title: "模型-属性-内容"
                                    }]
                                },
                                {
                                    name: "材质和装饰",
                                    level: "2",
                                    data: [{
                                        img: $scope.imgIconModel,
                                        title: "模型-属性-内容"
                                    }]
                                },
                                {
                                    name: "标识数据",
                                    level: "2",
                                    data: [{
                                        img: $scope.imgIconModel,
                                        title: "模型-属性-内容"
                                    }]
                                },
                                {
                                    name: "结构",
                                    level: "2",
                                    data: [{
                                        img: $scope.imgIconModel,
                                        title: "模型-属性-内容"
                                    }]
                                },
                                {
                                    name: "阶段化",
                                    level: "2",
                                    data: [{
                                        img: $scope.imgIconModel,
                                        title: "模型-属性-内容"
                                    }]
                                },
                                {
                                    name: "限制条件",
                                    level: "2",
                                    data: [{
                                        img: $scope.imgIconModel,
                                        title: "模型-属性-内容"
                                    }]
                                }
                            ]
                        }
                    ],
                    sign: {
                        eyesOpen: true,
                        color: ["#f65f74", "#9c4de6", "#3565ed", "#4ed390", "#f39846"],
                        colorIndex: "#f65f74",
                        colorClass: "color-fff",
                        orderUp: true,
                        search: "",
                        data: [
                            {
                                eyesOpen: true,
                                name: "标注名称",
                                colorIndex: "#f65f74",
                                edit: false,
                                time: "2018-09-20",
                                moreMsg: "标注内容",
                            },
                            {
                                eyesOpen: false,
                                name: "标注名称",
                                colorIndex: "#f65f74",
                                edit: false,
                                time: "2018-09-20",
                                moreMsg: "标注内容",
                            }
                        ]
                    },
                    eyesmark: {
                        color: ["#f65f74", "#9c4de6", "#3565ed", "#4ed390", "#f39846"],
                        colorIndex: "#f65f74",
                        colorClass: "color-fff",
                        orderUp: true,
                        search: "",
                        data: [
                            {
                                img: $scope.imgCompassCircle,
                                name: "视角书签名称",
                                colorIndex: "#f65f74",
                                edit: false,
                                time: "2018-09-20",
                                moreMsg: "视角书签内容",
                            },
                            {
                                img: $scope.imgCompassCircle,
                                name: "视角书签名称",
                                colorIndex: "#f65f74",
                                edit: false,
                                time: "2018-09-20",
                                moreMsg: "视角书签内容",
                            }
                        ]
                    }
                };
                // ..
            }
        };
    });

    return appAngular;
});